<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="上传质检结果"
    width="1000"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="mt-4">
      <el-tabs type="border-card">
        <el-tab-pane
          class="relative"
          :label="item.custom_sku"
          v-for="(item, index) in sku_lists"
          :key="index"
        >
          <template #label>
            {{ item.sku || item.custom_sku }}
          </template>
          <div class="h-[600px] overflow-auto relative">
            <el-card>
              <template #header>产品信息</template>
              <div class="h-t w-[800px]">
                <div class="updateMar">
                  <span class="updateTitle">产品分类：</span
                  ><span class="updateTitleLevel">{{
                    item.goods_spu?.spu_category_text
                  }}</span>
                </div>
                <div class="updateMar">
                  <span class="updateTitle">产品名称：</span
                  ><span class="updateTitleLevel">{{ item.sku_cn_title }}</span>
                </div>
                <div class="updateMar clearfix">
                  <div class="fl">
                    <span class="updateTitle">SPU：</span
                    ><span class="updateTitleLevel">{{ item.spu }}</span>
                  </div>
                  <div class="fl" style="margin: 0 43px 0 73px">
                    <span class="updateTitle">SKU：</span
                    ><span class="updateTitleLevel" style="color: #3366f1">{{
                      item.sku || "--"
                    }}</span>
                  </div>
                  <div class="fl">
                    <span class="updateTitle">自定义SKU：</span
                    ><span class="updateTitleLevel" style="color: #3366f1">{{
                      item.custom_sku
                    }}</span>
                  </div>
                </div>
              </div>
              <div
                class="w-[100px] h-[100px] absolute top-12 right-4"
                @click="showImage(item.sku_id)"
              >
                <img class="w-full h-full object-cover" :src="item.attr_img" />
              </div>
              <div class="updateMar clearfix jf">
                <div class="fl">
                  <span class="updateTitle"
                    >品牌：{{ item.goods_sku_sales_info?.brand_name || "--" }}</span
                  >
                </div>
                <div class="fl">
                  <span class="updateTitle"
                    >规格型号：{{ item.goods_spu?.specification_model || "--" }}</span
                  >
                  <!-- 暂无此字段 -->
                </div>
                <div class="fl">
                  <span class="updateTitle"
                    >插头规格：{{
                      item.goods_sku_sales_info?.plug_specification_text || "--"
                    }}</span
                  >
                  <!-- 暂无此字段 -->
                </div>
                <div class="fl">
                  <span class="updateTitle">产品多属性：</span
                  ><span class="updateTitleLevel">{{
                    item.sku_specification?.header.length >= 2 ? "多属性" : "单属性"
                  }}</span>
                </div>
              </div>
              <div class="updateMar clearfix jf">
                <div class="fl">
                  <span class="updateTitle"
                    >物流属性：{{ item.goods_spu?.logistics_attributes_name }}</span
                  >
                </div>
                <div class="fl">
                  <span class="updateTitle">是否需要加工：</span
                  ><span class="updateTitleLevel">{{
                    item.goods_spu?.need_processing_text
                  }}</span>
                </div>
                <div class="fl">
                  <span class="updateTitle">报关材质：</span>
                  <span class="updateTitleLevel" v-if="item.goods_sku_supplier">{{
                    getCNMaterial(item.goods_sku_supplier)
                  }}</span>
                </div>
                <div class="fl">
                  <span class="updateTitle">是否含有辅料：</span>
                  <span class="updateTitleLevel">{{
                    item.is_contains_accessories == 1 ? "是" : "否"
                  }}</span>
                </div>
              </div>
              <div class="updateMar clearfix jf">
                <div class="fl">
                  <span class="updateTitle">产品毛重(g)：</span
                  ><span class="updateTitleLevel">{{ item.gross_weight_g }}</span>
                </div>
                <div class="fl">
                  <span class="updateTitle">产品净重(g)：</span
                  ><span class="updateTitleLevel">{{ item.net_weight_g }}</span>
                </div>
                <div class="fl">
                  <span class="updateTitle">产品尺寸：</span
                  ><span class="updateTitleLevel">
                    {{ item.product_size_cm?.length }}*{{
                      item.product_size_cm?.width
                    }}*{{ item.product_size_cm?.height }}cm
                  </span>
                </div>
                <div class="fl">
                  <span class="updateTitle" style="white-space: nowrap"
                    >产品包装尺寸：</span
                  >
                  <span class="updateTitleLevel"
                    >{{ item.packing_size_cm?.length }}*{{
                      item.packing_size_cm?.width
                    }}*{{ item.packing_size_cm?.height }}cm</span
                  >
                </div>
              </div>
              <div class="updateMar clearfix jf">
                <div class="fl">
                  <span class="updateTitle">认证类型：</span
                  ><span class="updateTitleLevel">{{
                    filterAuth(item.goods_sku_authentication)
                  }}</span>
                </div>
                <div class="fl">
                  <span class="updateTitle">开发人员：</span
                  ><span class="updateTitleLevel">{{ item.developer_text }}</span>
                </div>
                <div class="fl">
                  <span class="updateTitle">证书/文件：</span
                  ><span
                    class="cursor-pointer text-[#3366f1]"
                    @click="showCertificateInformation(item.sku_id)"
                    >点击查看</span
                  >
                </div>
              </div>
            </el-card>
            <el-card>
              <template #header>编辑备注</template>
              <template v-if="item.edit_remark">
                <div v-html="item.edit_remark"></div>
              </template>
              <div class="text-[#999]" v-else>暂无备注</div>
            </el-card>
            <el-card>
              <template #header>仓库质检备注</template>
              <WangEditor v-model="item.inspection_remark" :min-height="100" />
            </el-card>
            <el-card class="mt-2">
              <template #header>附件</template>
              <FileUpload
                v-model="item.inspection_remark_appendix"
                :isShowTip="false"
              ></FileUpload>
            </el-card>
            <el-card class="mt-2">
              <template #header>SKU样品检测结果</template>
              <el-select
                class="w-full"
                v-model="item.sample_testing"
                collapse-tags
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in resultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="close">取消</el-button>
        <el-button class="ml-2" type="primary" :loading="loading" @click="save()"
          >保存</el-button
        >
      </div>
    </template>
  </el-dialog>
  <CertificateInformation ref="CertificateInformationRef"></CertificateInformation>
  <checkImage ref="checkImageRef"></checkImage>
</template>
<script setup lang="jsx">
import { batchUploadInspection, querySkuList } from "../api.js";
import { ElMessage, ElMessageBox } from "element-plus";
import FileUpload from "@/components/FileUpload";
import { resultOptions } from "../data.js";
import CertificateInformation from "@/components/CertificateInformation/index";
import { getSKURemark } from "@/api/index.js";
import checkImage from "@/views/task/sample-list/components/checkImage.vue";
import { getSKUDetailList } from "@/api/index.js";
import WangEditor from "@/components/WangEditor/index.vue";

const load = ref(false);

const data = reactive({
  visible: false,
  loading: false,
  formValues: {},
  sku_ids: [],
  sku_lists: [],
});
const { visible, loading, formValues, sku_ids, sku_lists } = toRefs(data);

const open = async (records) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  sku_ids.value = records;
  getSKUList();
  visible.value = true;
};
const close = () => {
  sku_lists.value = [];
  visible.value = false;
};

const getSKUList = async () => {
  try {
    const [res, res1] = await Promise.all([
      getSKUDetailList({
        with: ["goods_sku_authentication"],
        id: sku_ids.value,
      }),
      getSKURemark({
        sku_ids: sku_ids.value,
      }),
    ]);

    // 根据 res 和 res1 的数据处理 sku_lists.value
    sku_lists.value = res.data.map((i) => {
      i.sample_testing = "";
      i.inspection_remark_appendix = [];
      return { ...i, ...res1.data.find((item) => item.sku_id === i.id) };
    });
  } catch (e) {
    throw Error(e);
  }
};

const filterAuth = (list) => {
  if (!list?.length) {
    return "--";
  }
  let uniqueAuthNames = new Set();

  list.forEach((i) => {
    const country = i.country.map((j) => j.country_name).join("、");
    const text = `【${country}、${i.authentication_name}】`;
    uniqueAuthNames.add(text);
  });

  let text = Array.from(uniqueAuthNames);
  return text.join("、");
};

// 查看证书文件
const CertificateInformationRef = ref();
const showCertificateInformation = (sku_id) => {
  CertificateInformationRef.value.open(sku_id);
};

const save = async () => {
  const data = sku_lists.value.map((i) => {
    return {
      sku_id: i.sku_id,
      sku: i.sku,
      inspection_remark: i.inspection_remark,
      edit_remark: i.edit_remark,
      sample_testing: i.sample_testing,
      inspection_remark_appendix: i.inspection_remark_appendix,
    };
  });

  let massageArray = [];
  data.forEach((item, index) => {
    if (!item.sample_testing) {
      massageArray.push(`请选择第 ${index + 1}项 ${item.sku}SKU样品检测结果`);
    }
  });
  if (massageArray && massageArray.length) {
    ElMessageBox({
      title: "提示",
      message: () => <div>{massageArray.map((d) => h("p", null, d))}</div>,
    });
    return;
  }

  try {
    const res = await batchUploadInspection({ data });
    ElMessage.success(res.message);
    close();
  } catch (e) {
    throw Error(e);
  }
};

// 查看图片
const checkImageRef = ref();
const showImage = (sku_id) => {
  checkImageRef.value.open(sku_id);
};

// 获取报关材质
const getCNMaterial = (list) => {
  if (list?.length == 0) {
    return "--";
  }
  const findItem = list.find((i) => i.is_default_supplier == 1);
  return findItem?.goods_sku_customs?.cn_material || "--";
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}

.updateTitle {
  color: #9da1ad;
  font-size: 14px;
  display: inline-block;
}

.updateMar {
  margin: 16px 0;
}

.updateTitleLevel {
  color: #3a4259;
  font-size: 14px;
}

.updateMar.jf {
  color: red;

  .fl {
    width: 25%;
  }
}
</style>
